<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>文件目录服务</title>
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="app" class="container">
    <div>
        <h7> [{{currentDir}}]的目录列表 - <a :href="parentDir">返回上一级</a> </h7>
        <table class="table">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Last modified</td>
                    <td>Size</td>
                    <td align="center">Description</td>
                </tr>
            </thead>
            <tbody>
<!--                <tr th:each="item:${fileList}">-->
<!--                    <td> <a th:href="${item.relativePath}" th:text="${item.fileName}"></a></td>-->
<!--                    <td th:text="${item.lastModified}"></td>-->
<!--                    <td th:text="${item.size}"> bytes</td>-->
<!--                    <td><button type="button" class="btn-primary"  th:text="${item.description}"></button></td>-->
<!--                </tr>-->
                    <tr v-for="item in fsList" :key="item.id">
                        <td>
                            <div v-if="item.isDir === 1">
                                <a :href="item.relativePath">{{item.fileName}}</a>
                            </div>
                            <div v-else>
                                {{item.fileName}}
                            </div>
                        </td>
                        <td>{{item.lastModified}}</td>
                        <td>{{item.size}}</td>
                        <td align="center">
                            <div v-if="item.description==='--'">
                                --
                            </div>
                            <div v-else>
                                <input type="button" class="btn btn-primary btn-lg" @click="fsDownload(item.relativePath)" :value="item.description"/>
                            </div>
                        </td>

                    </tr>
            </tbody>
        </table>
    </div>

</div>


<script>

    var v = new Vue({
        el: "#app",
        data: {
            fsList:[],
            parentDir:"",
            currentDir:""
        },

        methods: {

            fs: function () {
                var vueObj = this;
                axios.get("/release/fs/list").then(function (resp) {
                    vueObj.fsList = resp.data.data.fsList;
                    vueObj.parentDir = resp.data.data.parentDir
                    vueObj.currentDir = resp.data.data.currentDir
                })
            },
            fsDownload(relativePath){
                window.location.href="/release/fs/download?relativePath="+relativePath;
            }
        },
        mounted: function () {
            this.fs();
        },

    })


</script>


</body>
</html>